<script setup lang="ts">
import {CHANGE_BALANCE_TYPE, PAY_TYPE} from "~/const/Maps";
import {USER_STATUS} from "../../../const/common";
import type {FormInstance} from "element-plus";
const time=ref([]);
definePageMeta({
  layout:'admin',
  title:'用户列表',
});
const form=reactive({
  limit:20,
  page:1,
  user_id:'',
});

const {data:list,refresh}=await useServerGet('/backend/user/getList',form)
const search=()=>{
  refresh&&refresh();
}
const modifyRef=ref<FormInstance>();
const modifyRules=reactive({
  balance_type: [
    { required: true, message: '请选择增加/减少', trigger: 'blur' },
  ],
  balance: [
    { required: true, message: '请输入金额', trigger: 'blur' },
    {pattern:/^\d+(\.\d{1,2})?$/,message:'金额格式不正确',trigger:'blur'},
    {validator:(rule:any, value:any, callback:Function)=>{
        if(value<0.01){
          callback(new Error('金额不能小于0.01'))
        }else{
          callback()
        }
      },trigger:'blur'
    }
  ],
});
const modifyDo=()=>{
  modifyRef.value?.validate(async (valid,invalidFields) => {
    if (valid) {
      const {data,code}=await usePost('/backend/user/changeBalance',modify);
      if(code==200){
        modifyShow.value=false;
        refresh&&refresh();
      }
    } else {
      showFieldsError(invalidFields)
    }
  });
}
const modify=reactive({
  id:1001,//用户id
  balance_type:1,//1:增加，2:减少
  balance:100,//金额
});
const modifyShow=ref(false);
const modifyShowFn=(row:any)=>{
  modify.id=row.id;
  modifyShow.value=true;
}
const stateChange=(row)=>{
  ElMessageBox.confirm(`确定${row.user_status?'禁用':'启用'}吗?`,'提示',{
    confirmButtonText:'确定',
    cancelButtonText:'取消',
    type:'warning',
    center:true
  }).then( async ()=>{
    const {data,code}=await usePost('/backend/user/disable',{id:row.id});
    if(code===200){
      ElMessage.success('操作成功')
      refresh?.()
    }
  })
}
</script>

<template>
  <div>
    <el-card>
      <div class="flex">
        <div class="w-52 mr-2">
          <el-input placeholder="请输入用户" v-model="form.user_id" class="w-40" clearable></el-input>
        </div>
        <div class="w-20">
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </div>
    </el-card>
    <el-card class="mt-4">
      <el-table
          ref="multipleTable1"
          :data="list.data?.list"
          tooltip-effect="dark"
          style="width: 100%"
          align="center"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
      >
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="user_status" label="用户状态">
          <template #default="{row}">
            {{USER_STATUS[row.user_status]}}
          </template>
        </el-table-column>
        <el-table-column prop="qq" label="QQ"></el-table-column>
        <el-table-column prop="money" label="余额"></el-table-column>
        <el-table-column prop="frozen_money" label="冻结金额"></el-table-column>
        <el-table-column prop="updated_at" label="更新时间"></el-table-column>
        <el-table-column prop="created_at" label="创建时间"></el-table-column>
<!--        操作：禁用/启用，更改金额-->
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="text" size="small" @click="stateChange(row)">{{row.user_status?'禁用':'启用'}}</el-button>
            <el-button type="text" size="small" @click="modifyShowFn(row)">修改余额</el-button>
          </template>
        </el-table-column>
      </el-table>
      <MyPage v-model:page="form.page" v-model:perpage="form.limit" v-model:total="list.data.total" @change="refresh"></MyPage>
      <el-dialog title="修改余额" v-model="modifyShow" :close-on-click-modal="false" width="400" center>
        <el-form :model="modify" :rules="modifyRules" ref="modifyRef" label-width="80px" class="w-[300px] max-auto">
          <el-form-item label="增加/减少" prop="balance_type">
            <el-radio-group v-model="modify.balance_type">
              <el-radio :label="label" :value="value*1" v-for="(label,value) in CHANGE_BALANCE_TYPE">增加</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="金额" prop="balance">
            <el-input v-model="modify.balance"></el-input>
          </el-form-item>
        </el-form>
        <div class="text-center">
          <el-button type="primary" @click="modifyDo">确定</el-button>
          <el-button @click="modifyShow=false">取消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<style scoped lang="scss">

</style>